<template>
    <div class="dish-info-management">
        <h1>菜品信息管理</h1>
        <div class="search-container">
            <el-button type="success" @click="showAddModal" style="margin-right: 20px;">+ 新增菜品</el-button>
            <el-input
                v-model="searchQuery"
                placeholder="请输入菜品名称"
                style="width: 300px; margin-right: 20px;"
            />
            <el-select v-model="selectedCategory" placeholder="选择分类" style="width: 200px;">
                <el-option
                    v-for="category in categories"
                    :key="category.id"
                    :label="category.name"
                    :value="category.id"
                />
            </el-select>
        </div>
        
        <el-table :data="filteredDishes" style="width: 100%">
            <el-table-column
                label="索引"
                width="80"
            >
                <template slot-scope="scope">
                    {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="菜品名称"></el-table-column>
            <el-table-column prop="imageUrl" label="菜品图片"></el-table-column>
            <el-table-column prop="categoryId" label="菜品分类"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="description" label="菜品描述"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    {{ scope.row.status === 1 ? '在售' : '下架' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="showEditModal(scope.row)" type="warning">修改</el-button>
                    <el-button @click="deleteDish(scope.row.id)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalDishes"
            layout="total, prev, pager, next, jumper"
        ></el-pagination>

        <!-- 新增/编辑菜品模态框 -->
        <el-dialog :visible.sync="showModal" title="编辑菜品">
            <div class="modal-content">
                <el-form>
                    <el-form-item label="菜品名称" required>
                        <el-input v-model="currentDish.name" placeholder="菜品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="价格" required>
                        <el-input v-model="currentDish.price" placeholder="价格" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="分类" required>
                        <el-select v-model="currentDish.category_id" placeholder="选择分类">
                            <el-option
                                v-for="category in categories"
                                :key="category.id"
                                :label="category.name"
                                :value="category.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图片" required>
                        <image-upload v-model="currentDish.image_url" />
                    </el-form-item>
                    <el-form-item label="描述" required>
                        <el-input v-model="currentDish.description" placeholder="菜品描述"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" required>
                        <el-select v-model="currentDish.status" placeholder="状态">
                            <el-option label="在售" :value="1"></el-option>
                            <el-option label="下架" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeModal">取 消</el-button>
                <el-button type="primary" @click="saveDish">{{ isEdit ? '更新' : '添加' }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getDishes, addDish, updateDish, deleteDish } from '@/api/dish';
import { getCategories } from '@/api/category';
import ImageUpload from '@/components/ImageUpload.vue';

export default {
    name: 'DishInfoManagement',
    components: {
        ImageUpload
    },
    data() {
        return {
            dishes: [],
            categories: [],
            searchQuery: '',
            selectedCategory: null,
            showModal: false,
            isEdit: false,
            currentDish: { id: null, name: '', price: null, description: '', image_url: '', status: 1, category_id: null },
            currentPage: 1,
            pageSize: 5,
            totalDishes: 0,
        };
    },
    computed: {
        filteredDishes() {
            return this.dishes.filter(dish =>
                dish.name.includes(this.searchQuery) &&
                (this.selectedCategory ? dish.category_id === this.selectedCategory : true)
            );
        },
    },
    methods: {
        async fetchDishes() {
            const response = await getDishes({ page: this.currentPage, size: this.pageSize });
            this.dishes = response.records;
            this.totalDishes = response.total;
        },
        // 获取菜品分类
        async fetchCategories() {
            const response = await getCategories();
            this.categories = response.records;
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.fetchDishes();
        },
        showAddModal() {
            this.isEdit = false;
            this.currentDish = { id: null, name: '', price: null, description: '', image_url: '', status: 1 };
            this.showModal = true;
        },
        showEditModal(dish) {
            this.isEdit = true;
            this.currentDish = { ...dish };
            this.showModal = true;
        },
        async saveDish() {
            if (this.isEdit) {
                await updateDish(this.currentDish.id, this.currentDish);
            } else {
                await addDish(this.currentDish);
            }
            this.fetchDishes();
            this.closeModal();
        },
        async deleteDish(id) {
            if (confirm('确定要删除该菜品吗？')) {
                await deleteDish(id);
                this.fetchDishes();
            }
        },
        closeModal() {
            this.showModal = false;
        }
    },
    mounted() {
        this.fetchDishes();
        this.fetchCategories();
    },
};
</script>

<style scoped>
.dish-info-management {
    padding: 20px;
    background: #f5f7fa;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-button--success {
    background-color: #70edf6;
    border-color: #70edf6;
}

.el-button--warning {
    background-color: #f4f14c;
    border-color: #f4f14c;
}

.el-button--danger {
    background-color: #f56e89;
    border-color: #f56e89;
}

.el-table {
    border: 1px solid #e4e7ed;
}

.el-table th {
    background-color: #f5f7fa;
    color: #606266;
}

.el-table td {
    color: #303133;
}

.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.upload-demo .el-upload__text {
    display: none;
}
</style>
